<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    :collapse="iscollapse"
    @open="handleOpen"
    @close="handleClose"
    active-text-color="#ffd04b"
    background-color="#FFFFFF"
    text-color="#080808"
    unique-opened="true"
  >
    <h3>
      <span v-if="iscollapse">
        <img src="../assets/Companydynamics.png" alt="Logo" class="menu-logo" />
      </span>
      <span v-else>
        <img src="../assets/Companydynamics.png" alt="Logo" class="menu-logo" />
        <!-- 使用图片 -->
        MES
      </span>
    </h3>
    <!-- 循环渲染菜单 -->
    <template v-for="menu in menus" :key="menu.id">
      <template v-if="menu.children === null">
        <!-- 一级菜单 -->
        <el-menu-item :index="menu.path" @click="clickMenu(menu)" class="menu">
          <el-icon><component :is="menu.icon" style="width: 20px; height: 20px" /></el-icon>
          <template #title>{{ menu.menuInfoName }}</template>
        </el-menu-item>
      </template>

      <template v-else>
        <!-- 二级菜单 -->
        <el-sub-menu :index="menu.path">
          <template #title>
            <el-icon><component :is="menu.icon" style="width: 20px; height: 20px" /></el-icon>
            <span>{{ menu.menuInfoName }}</span>
          </template>

          <!-- 递归渲染子菜单项 -->
          <el-menu-item
            v-for="child in menu.children"
            :key="child.id"
            :index="child.path"
            @click="clickMenu(child, menu)"
          >
            <el-icon><component :is="child.icon" style="width: 20px; height: 20px" /></el-icon>
            {{ child.menuInfoName }}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </template>
  </el-menu>
</template>

<script>
import { ApiGetBasicData_Roleinfo_MenuInfoListAsync } from '@/api/basic/basicDataRoleinfoApi'

export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,
      menus: []
    }
  },
  methods: {
    //点击菜单
    clickMenu(child, parentMenu) {
      //菜单
      this.$router.push(child.path)

      this.parentMenus = { ...parentMenu }
      this.parentMenus.children = []
      if (parentMenu.menuInfoName != child.menuInfoName) {
        this.parentMenus.children.push(child)
      }
      //面包屑
      this.$store.commit('selectMenu', child)
      this.$store.commit('selectMenuBreadcrumb', this.parentMenus)
    }
  },
  computed: {
    iscollapse() {
      return this.$store.state.isCollapse
    }
  },
  created() {
    ApiGetBasicData_Roleinfo_MenuInfoListAsync()
      .then((res) => {
        this.menus = res.data.data
      })
      .catch(() => {
        console.log()
      })
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  height: 100vh;
  h3 {
    color: #515a6e;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    font-weight: 400;
  }
}

// 圆角
/* 菜單1 */
// .el-menu .el-menu-item {
//   border-radius: 4px 2px 2px 4px;
// }
// /* 子母菜單2 */
// .el-submenu__title {
//   border-radius: 4px 2px 2px 4px;
// }
.el-menu-item {
  color: #080808;
}
.el-submenu__title {
  color: #080808;
}

/* 一级菜单项鼠标经过背景颜色及字体颜色 */
.el-menu-item:hover {
  background-color: #ecf5ff !important;
  color: #409eff !important;
}

/* 一级菜单下的菜单项鼠标经过背景颜色及字体颜色 */
.el-menu .el-sub-menu .el-menu-item:hover {
  background-color: #ecf5ff !important;
  color: #409eff !important;
}

/* 菜單被選中的背景色 */
.el-menu .el-menu-item.is-active {
  background-color: #ecf5ff !important;
  color: #409eff !important;
  border-right: 2px solid var(--primary-dark, #409eff);
}

/* 取消最小邊距造成的顯示不全,跟css裏的.el-submenu .el-menu-item有關 */
.el-submenu .el-menu-item {
  min-width: 190px !important;
}

/deep/ .el-sub-menu .el-menu {
  // background-color: #f5f8f8;
  background-color: #ffffff;
  border: none;
}

/* Logo 样式 */
.menu-logo {
  width: 24px; /* 设定图片的宽度 */
  height: auto; /* 高度自动调整以保持比例 */
  vertical-align: middle; /* 垂直对齐 */
  margin-right: 4px; /* 图片与文本之间的间距 */
}
</style>
